<template>
    <div class="logBody">
        <div class="login-box">
        <div class="owl" id="owl" ref="owl">
            <div class="hand"></div>
            <div class="hand hand-r"></div>
            <div class="arms">
                <div class="arm"></div>
                <div class="arm arm-r"></div>
            </div>
        </div>
        <div class="input-box">
            <input type="text" placeholder="账号" v-model="user">
            <input type="password" placeholder="密码" id="password" @focus="getStyle" @blur="delStyle" v-model="password" >
            <div class="forgetPassword">  <router-link to="/phone"> <span>忘记密码?</span></router-link>    <span class="enroll"><router-link to="/enroll">去注册</router-link> </span></div>
           
            <button><router-link to="/user"><p>登录</p></router-link></button>  
           <!-- 思路提供在点击登录后与数据库内容匹配，成功则返回路由跳转的url，否则提示用户或者密码不正确，登陆后还需要使用token -->
        </div>
    </div>
    </div>
    
</template>

<script>
import { mapGetters,mapActions} from 'vuex';
export default{
    data(){

         return{
            user:"",
            password:"",
            login_url:""

         }
    },

   methods:{
        getStyle(){
           this.$refs.owl.classList.add("password")
             
        },
        delStyle(){
            this.$refs.owl.classList.remove("password") 
            this.$axios({
                  url:this.$host+"/login",
                  method:"get",
                  params:{
                    user:this.user,
                    password:this.password

                  }
             
                 
             }).then(resp=>{
                 if(resp.data=="ok"){
                    localStorage.setItem("admin",resp.data)
                 }else{
                    localStorage.setItem("token",resp.data[0])
                    
                    localStorage.setItem("user",JSON.stringify(resp.data[1]))
                    //在这里需要把返回来的数据给存到vuex中
                    let user=resp.data[1];
                    // console.log(user[0]);

                    this.$store.dispatch("userDate",user)  
                        
                    
                   
                 
                 


                 }
               
              
                 
             }) 
          
                 
        }

     
   }
  
    
     
}



</script>



<style scoped>
.enroll{
     margin-left: 8px;
}
a{
    text-decoration: none;
    color: white;
}
.forgetPassword{
     margin-bottom: 16px;
}
.forgetPassword>span{
    color: blue;
}
.forgetPassword a{
    color: blue;
}
.logBody{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#72afd3,#96fbc4);
}
.login-box{
    /* 相对定位 */
    position: relative;
    width: 320px;
}
.input-box{
    /* 弹性布局 垂直排列 */
    display: flex;
    flex-direction: column;
}
.input-box input{
    height: 40px;
    border-radius: 3px;
    /* 缩进15像素 */
    text-indent: 15px;
    outline: none;
    border: none;
    margin-bottom: 15px;
}
.input-box input:focus{
    outline: 1px solid lightseagreen;
}
.input-box button{
    border: none;
    height: 45px;
    background-color: lightseagreen;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
}
/* 接下来是猫头鹰的样式 */
.owl{
    width: 211px;
    height: 108px;
    /* 背景图片 */
    background: url("../../public/owl-login.png") no-repeat;
    /* 绝对定位 */
    position: absolute;
    top: -100px;
    /* 水平居中 */
    left: 50%;
    transform: translateX(-50%);
}
.owl .hand{
    width: 34px;
    height: 34px;
    border-radius: 40px;
    background-color: #472d20;
    /* 绝对定位 */
    position: absolute;
    left: 12px;
    bottom: -8px;
    /* 沿Y轴缩放0.6倍（压扁） */
    transform: scaleY(0.6);
    /* 动画过渡 */
    transition: 0.3s ease-out;
}
.owl .hand.hand-r{
    left: 170px;
}
.owl.password .hand{
    transform: translateX(42px) translateY(-15px) scale(0.7);
}
.owl.password .hand.hand-r{
    transform: translateX(-42px) translateY(-15px) scale(0.7);
}
.owl .arms{
    position: absolute;
    top: 58px;
    width: 100%;
    height: 41px;
    overflow: hidden;
}
.owl .arms .arm{
    width: 40px;
    height: 65px;
    position: absolute;
    left: 20px;
    top: 40px;
    background: url("../../public/owl-login-arm.png") no-repeat;
    transform: rotate(-20deg);
    transition: 0.3s ease-out;
}
.owl .arms .arm.arm-r{
    transform: rotate(20deg) scaleX(-1);
    left: 158px;
}
.owl.password .arms .arm{
    transform: translateY(-40px) translateX(40px);
}
.owl.password .arms .arm.arm-r{
    transform: translateY(-40px) translateX(-40px) scaleX(-1);
}


</style>